<template>
    <Card>
        <Button class="ivu-mb-16" type="primary" @click="handleEdit(false)"
        	v-hasC="{name: '-v1-rbac-role-agency-create',flag: '/v1/rbac/role/agency-create'}">新增</Button>
        <JG-table
            :params="params"
            :loading="loading"
            :total="total"
            :data="data"
            :butshow="butshow"
            :columns="columns"
            @askData="askData"
            @handleEdit="handleEdit"
            @handleDelete="handleDelete"></JG-table>
        <modal ref="modal" @askData="askData"/>
        <Modal
            v-model="modaldel"
            title="删除提醒"
            @on-cancel="cancel" width="420">
            <p >确认删除该角色吗？</p>
            <div slot="footer">
                <Button type="error" :loading="modal_loading" @click="del">确定删除</Button>
                <Button @click="cancel">取消</Button>
            </div>
        </Modal>
    </Card>
</template>
<script>
    import {
        getRoleLists,
        deleteRoleLists
    } from '@/api/powersetting.js';
    import modal from './modal';
    export default {
        components: { modal },
        name: '',
        data () {
            return {
                butshow: {
                    Edit: {
                        name: '-v1-rbac-role-agency-update',
                        flag: '/v1/rbac/role/agency-update'
                    },
                    Delete: {
                        name: '-v1-rbac-role-agency-delete',
                        flag: '/v1/rbac/role/agency-delete'
                    }
                },
                loading: false,
                total: -1,
                params: { page: 1, pageSize: 10 },
                paramsinitial: [1, 2, 3],
                columns: [
                    { title: 'ID', key: 'id' },
                    { title: '角色名称', key: 'name' },
                    { title: '状态', slot: 'status' },
                    { title: '备注', slot: 'type' },
                    { title: '操作', slot: 'action', width: 160 }
                ],
                data: [],
                modaldel: false,
                modal_loading: false,
                id: null
            }
        },
        mounted () {
            this.initial()
        },
        methods: {
            initial () {
                this.askData()
            },
            askData () {
                this.loading = true
                getRoleLists(this.params).then(res => {
                    this.data = res
                    this.loading = false
                }).catch(() => {
                    this.loading = false;
                });
            },
            handleEdit (row) {
                this.$refs.modal.initial(row)
            },
            handleDelete (row) {
                this.modaldel = true
                this.id = row.id
            },
            cancel () {
                this.id = null
                this.modaldel = false
                this.modal_loading = false
            },
            del () {
                this.modal_loading = true
                deleteRoleLists({ id: this.id }).then(() => {
                    this.$Message.info('删除成功');
                    this.askData();
                    this.cancel();
                    this.modal_loading = false
                });
            }
        }
    }
</script>
